<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Animation</title>
    <style>
div {
	margin-bottom: 12px;
}
.box {
	width: 50px;
	height: 50px;

	background-color: aquamarine;
}
.fade-in {
	animation: fadeIn 1.5s ease-out forwards;
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.bounce {
	border-radius: 50%;

	animation: bounce 2s infinite;
}
@keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
	}
}
.typewriter {
	display: flex;

	margin: 20px 0;
	width: fit-content;
	height: 100px;

	justify-content: center;
	align-items: center;
}
.typewriter-text {
	overflow: hidden;

	border-right: 3px solid #fdbb2d;

	font-weight: bold;
	white-space: nowrap;

	color: #fdbb2d;

	animation: typing 4s steps(28) infinite,
	blink-cursor .7s step-end infinite;
}
@keyframes typing {
	0% {
		width: 0;
	}
	50% {
		width: 100%;
	}
	90%,
	100% {
		width: 100%;
	}
}

@keyframes blink-cursor {
	from,
	to {
		border-color: transparent;
	}
	50% {
		border-color: #fdbb2d;
	}
}

    </style>
  </head>
  <body>
    <div class="box fade-in"></div>
    <div class="box bounce"></div>
    <div class="typewriter">
      <div class="typewriter-text">CSS steps() 动画非常强大!</div>
    </div>
  </body>
</html>
